<template>
  <el-card shadow="hover" style="height: 100%;" :body-style="{height:'100%'}">
    <template #header>
      <nav class="flex justify-between">
        <span>创建一个URL链接</span>
        <el-link type="primary" target="_blank" href="https://vueuse.org/core/useObjectUrl/">useObjectUrl</el-link>
      </nav>
    </template>

    <input type="file" @change="onFileChange" />
    <el-link type="primary" target="_blank" :href="url">url</el-link>
  </el-card>
</template>

<script setup lang="ts" name="useObjectUrl">
import { useObjectUrl } from '@vueuse/core'
const url = shallowRef()
const onFileChange = (event) => url.value = unref(useObjectUrl(event.target.files[0]))

</script>

<style scoped lang="less">

</style>
